<template>
    <div class="parent">
        <div class="navList">
            <div class="listItem" @click="openList('region')" :class="[this.isActive('region')]">
                <text class="text" :class="[this.textActive('region')]">行政区划</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpenKey == 'region'?'open':'']">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('time')" :class="[this.isActive('time')]">
                <text class="text" :class="[this.textActive('time')]">{{bgTime}}</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('time')]">{{'\ue60b'}}</text>
            </div>
            <div class="listItem" @click="openList('tabCont')" :class="[this.isActive('tabCont')]">
                <text class="text" :class="[this.textActive('tabCont')]">{{edTime}}</text>
                <text class="bar-ic" :style="{fontFamily: 'wxcIconFont'}"  :class="[this.isOpen('tabCont')]">{{'\ue60b'}}</text>
            </div>
        </div>
        <listCont @selectItem="selectItem"></listCont>
        <listCont :is="currentTab" @closeList="closeContent" :gridData="gridData" :gridHead="gridHead"></listCont>
    </div>
</template>
<script>
import event from '../../net/capitalListCont.js'
import capitalListCont from './capitalListCont'
import region from '../../components/region'
import { addIconFontSupport } from '../../config/iconConfig.js'
import { getCache } from '../../util/storageUtils.js'
import { CTCE_USER_INFO } from '../../config/storageTypes.js'
const eventBus = weex.requireModule('bmEvents')
const dom = weex.requireModule('dom')
const picker = weex.requireModule('picker')
const modal = weex.requireModule('modal')
export default {
    name: 'month',
    data () {
        return {
            currentTab: 'capitalListCont',
            pIndexKey:'',
            isOpenKey: '',
            textActiveKey: '',
            bgTime: '开始时间',
            edTime: '截至时间',
            gridData: [],
            gridHead: [
                { name: 'XZQHMC', value: '行政区划'},
                { name: 'LHMJ', value: '绿化面积'},
                { name: 'LHMJ_JE', value: '绿化年养护费'},
                { name: 'DGS', value: '节能灯数'},
                { name: 'DGS_JE', value: '照明养护费'},
                { name: 'CS_GC_1_LEI_GS', value: '公厕一类'},
                { name: 'CS_GC_2_LEI_GS', value: '公厕二类'},
                { name: 'CS_GC_3_LEI_GS', value: '公厕三类'},
                { name: 'CS_GC_LEI_GS_JE', value: '公厕养护费'},
                { name: 'WSNCLWS', value: '污水量'},
                { name: 'WSNCLWS_JE', value: '污水养护费'},
                { name: 'LJNQYSL', value: '垃圾量'},
                { name: 'LJNQYSL_JE', value: '垃圾养护费'},
                { name: 'TYNYSS', value: '太阳能浴室数'},
                { name: 'TYNYSS_JE', value: '太阳能浴室养护费'}
            ],
            xzqhdm: ''
        }
    },
    components: {
        capitalListCont,
        region
    },
    beforeCreate () {
        this.$notice.loading.show()
        addIconFontSupport(dom, "../../")
    },
    created () {
        this.$navigator.setNavigationInfo({
            title: '管护资金统计',
            navShow: true,
            statusBarStyle: 'LightContent'
        })
        let year = new Date().getFullYear()
        let month = new Date().getMonth()
        let nextMonth = month + 1
        let day = new Date().getDate()
        if(month < 10 || nextMonth < 10) {
            month = '0' + month
            nextMonth = '0' + nextMonth
        }
        if(day < 10){
            day = '0' + day
        }
        // this.bgTime = year + '-' + month + '-' + day
        // this.edTime = year + '-' + nextMonth + '-' + day
        eventBus.on('xzqhEvent', (param) => {
            if (param) {
                this.xzqhdm = param
                this.currentTab = capitalListCont
                event.getTJ8(param, '', '').then(val => {
                    this.gridData = val.datalist
                    this.$nextTick(() => {
                        this.$notice.loading.hide()
                    })
                })
            } else {
                getCache(CTCE_USER_INFO).then(res => {
                    const data = JSON.parse(res)
                    this.xzqhdm = data.xzqhdm
                    event.getTJ8(data.xzqhdm, '', '').then(val => {
                        this.gridData = val.datalist
                        this.currentTab = capitalListCont
                        this.$nextTick(() => {
                            this.$notice.loading.hide()
                        })
                    })
                })
            }
        })
        getCache(CTCE_USER_INFO).then(res => {
            const data = JSON.parse(res)
            this.xzqhdm = data.xzqhdm
            event.getTJ8(data.xzqhdm, '', '').then(val => {
                this.gridData = val.datalist
                this.$nextTick(() => {
                    this.$notice.loading.hide()
                })
            })
            // store.commit('changeUserxzqhdm', data.xzqhdm)
            // store.commit('changeXzqh', data.xzqhdm)
            // store.commit('changeEtime', this.edTime)
            // store.commit('changeStime', this.bgTime)
            // store.dispatch('getDatalist', this)
        })
    },
    methods: {
        isActive (_c) {
            return this.pIndexKey === _c ?'openColor':''
        },
        isOpen (index) {
            return this.isOpenKey === index ?'open':''
        },
        textActive (ind) {
            return this.textActiveKey === ind ? 'textColor' : ''
        },
        openList (_key) {
            if(this.pIndexKey === _key || this.isOpenKey === _key || this.textActiveKey === _key) {
                this.pIndexKey = '';
                this.isOpenKey = '';
                this.textActiveKey = '';
                this.currentTab = '';
            } else {
                this.pIndexKey = _key;
                this.isOpenKey = _key;
                this.textActiveKey = _key;
                this.currentTab = _key;
            }
            if (_key == 'time') {
                picker.pickDate({
                    value: this.bgTime
                }, e => {
                    if (e.result === 'success') {
                        this.bgTime = e.data
                        this.pIndexKey = '';
                        this.isOpenKey = '';
                        this.textActiveKey = '';
                    } else if (e.result === 'cancel') {
                        this.pIndexKey = '';
                        this.isOpenKey = '';
                        this.textActiveKey = '';
                    }
                    this.$notice.loading.show()
                    event.getTJ8(this.xzqhdm, this.bgTime, this.edTime).then(val => {
                        this.gridData = val.datalist
                        this.currentTab = capitalListCont
                        this.$nextTick(() => {
                            this.$notice.loading.hide()
                        })
                    })
                })
            }
            if (_key == 'tabCont') {
                picker.pickDate({
                    value: this.edTime
                }, e => {
                    if (e.result === 'success') {
                        this.edTime = e.data
                        this.pIndexKey = '';
                        this.isOpenKey = '';
                        this.textActiveKey = '';
                    } else if (e.result === 'cancel') {
                        this.pIndexKey = '';
                        this.isOpenKey = '';
                        this.textActiveKey = '';
                    }
                    this.$notice.loading.show()
                    event.getTJ8(this.xzqhdm, this.bgTime, this.edTime).then(val => {
                        this.gridData = val.datalist
                        this.currentTab = capitalListCont
                        this.$nextTick(() => {
                            this.$notice.loading.hide()
                        })
                    })
                })
            }
        },
        closeContent () {
            this.pIndexKey = ''
            this.isOpenKey = ''
            this.currentTab = ''
            this.textActiveKey = ''
        },
    }
}
</script>
<style scoped>
.parent{
    width: 750px;
    flex: 1;
    background-color: #eee;
}
.navList{
  width: 750px;
  height: 96px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  border-bottom-color: #eee;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  background-color: white;
}
.listItem{
  width: 250px;
  height: 96px;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.special{
  border-right-width: 0;
}
.text{
  font-size:28px;
  font-family:NotoSansHans-Regular;
  color:rgba(151,151,151,1);
}
.bar-ic{
  font-size: 20px;
  color: rgba(151,151,151,1);
  padding-right: 10px;
}
.open{
  transform: rotate(180deg);
  color: rgba(255,255,255,1);
}
.openColor{
  width: 250px;
  height: 60px;
  background-color: rgba(35,196,160,1);
  color: rgba(255,255,255,1);
}
.textColor{
    color: rgba(255, 255, 255, 1);
}
</style>
